<body>
    <link rel="stylesheet" href="static/css/base.css">
    <link rel="stylesheet" href="static/css/QRCodeManagement.css">
    <div id="QRCodeManage">
        <div class="left">

            <div class="left_1">
                {{left_1}}
                <el-upload :on-preview="handlePreview" class="left_1a" :show-file-list="false"
                    :on-success="handleselect" v-if="left_1==='点击选择图片'" :before-upload="beforeUpload" action="#"
                    :auto-upload="false" :on-change="listenChange">
                    <img v-if="imageUrl" :src="imageUrl" class="QRCode">
                    <i class="left_1b"></i>
                    <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                </el-upload>


            </div>
            <div class="left_2" @click="upload($event)">
                确认上传
            </div>


        </div>
        <div class="right">
            <!-- <div class="container" style="margin-top: 8rem;">
                <div class="block">

                    <el-date-picker v-model="yearValue" type="year" placeholder="选择年" @blur="year">
                    </el-date-picker>
                </div>
            </div> -->
            <div class="right_1" @click="istrue=!istrue">
                <div class="right_1a">{{right_1a}}</div>
                <div class="right_1b">
                    <img src="static/images/三角下.svg" alt="">
                </div>
            </div>
            <div class="right_2" :class="istrue?'close ':'open '">
                <div class="right_2a">

                </div>
                <ul>
                    <li @click="gain">{{department_1}}</li>
                    <li @click="gain">{{department_2}}</li>
                    <li @click="gain">{{department_3}}</li>
                    <li @click="gain">{{department_4}}</li>
                    <li @click="gain">{{department_5}}</li>
                    <li @click="gain">{{department_6}}</li>
                    <li @click="gain">{{department_7}}</li>
                </ul>
            </div>

        </div>

    </div>
    <script>
        const c = window.cloud;
        Vue.prototype.cloud = c;
        Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
        Vue.config.devtools = true;
        new Vue({
            el: '#QRCodeManage',
            data() {
                return {
                    left_1: "NULL",
                    right_1a: "请选择部门",
                    istrue: true,
                    // yearValue: '',
                    department_1: "PC技术部",
                    department_2: "新媒体运营部 ",
                    department_3: "UI技术部",
                    department_4: "影视部",
                    department_5: "动画部",
                    department_6: "秘书处",
                    department_7: "网络研发部",
                    imageUrl: '',
                    fileList: [],


                }
            },
            methods: {

                async initWx() {
                    //创建新的cloud实例
                    var c1 = new this.cloud.Cloud({
                        identityless: true,
                        // 资源方 AppID 填自己的
                        resourceAppid: "wx96f760966921f98a",
                        // 资源方环境 ID	填自己的
                        resourceEnv: "cloud1-8g54d6xb74e96e7d",
                    });

                    await c1.init();
                    this.cloud = c1;
                    this.db = this.cloud.database()

                },
                // year() {
                //     if (this.right_1a != '' && this.yearValue != '') {
                //         this.left_1 = '点击选择图片';
                //     }

                // },
                gain(e) {
                    console.log(e);
                    this.right_1a = e.srcElement.innerText;
                    this.istrue = !this.istrue;
                    console.log(this.yearValue);
                    if (this.right_1a != '') {
                        this.left_1 = '点击选择图片';

                    } else {
                        this.$message({
                            type: 'warning',
                            message: '请选择部门'
                        })
                    }

                },
                handlePreview(file) {
                    console.log(file);
                },
                handleselect(res, file) {
                    // 这里就是选择后输出的结果
                    //然后这个raw应该是文件路径

                    console.log(res);
                    console.log(file);
                    this.imageUrl = URL.createObjectURL(file.raw);

                },
                listenChange(e) {
                    console.log(e);
                    // console.log(this.fileList);
                    this.imageUrl = URL.createObjectURL(e.raw);
                    this.fileList = e.raw;

                },
                beforeUpload(file) {

                    // const isJPG = file.type === 'image/jpeg';
                    // const isLt2M = file.size / 1024 / 1024 < 2;

                    // if (!isJPG) {
                    //     this.$message.error('上传头像图片只能是 JPG 格式!');
                    // }
                    // if (!isLt2M) {
                    //     this.$message.error('上传头像图片大小不能超过 2MB!');
                    // }
                    // return isJPG && isLt2M;
                },
                async upload() {

                    if (this.fileList == '') {
                        this.$message({
                            type: 'warning',
                            message: '请先选择图片'
                        })
                    } else {
                        console.log(this.fileList);
                        this.cloud.uploadFile({
                            config: {
                                env: "cloud1-8g54d6xb74e96e7d",
                            },
                            file: this.fileList,
                            cloudPath: "InterviewGroup/" + Date.now() + "_" + this.fileList.name,
                            success: (res) => {
                                console.log(res.fileID);
                                console.log(res);

                                this.db.collection('InterviewGroup').where({
                                    title: this.right_1a,
                                    data: this.yearValue
                                }).update({
                                    data: {
                                        barcode: res.fileID
                                    },
                                    success: res => {
                                        console.log(res);
                                        if (res.stats.updated) {
                                            this.$message({
                                                type: 'success',
                                                message: '上传成功'
                                            })
                                        } else {
                                            this.$message({
                                                type: 'warning',
                                                message: '此照片以上传，请勿重复操作'
                                            })
                                        }
                                    },
                                    fail: res => {
                                        console.log(res);
                                    }
                                })
                            }
                        });


                    }



                },
            },

            async created() {
                await this.initWx();
                //获取列表数据
            },
        }) 
    </script>
</body>